import React from 'react';
import { SettingOutlined, PoweroffOutlined, AntDesignOutlined } from "@ant-design/icons"
import { Avatar, Dropdown, Space } from "antd";
import type { MenuProps } from 'antd';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';

const items: MenuProps['items'] = [
    {
        label: '修改信息',
        key: '1',
        icon: <SettingOutlined />
    }, {
        label: '退出登录',
        key: '2',
        icon: <PoweroffOutlined style={{ color: "#f73131" }} />
    },
];


const DropDownHeader: React.FC = () => {
    const store = useSelector((state: any) => state.userinfo.userInfo);
    const navigate = useNavigate();
    const handleClick: MenuProps['onClick'] = ({ key }) => {
        if (key === "2") {
            localStorage.removeItem("token");
            navigate("/login")
        } else if (key === "1") {
            navigate("/userCenter")
        }
    }

    return (
        <Dropdown menu={{ items, onClick: handleClick }}>
            <Space>
                <Avatar
                    shape="circle" size={30}
                    icon={<AntDesignOutlined />}
                />
                {store.username}
                {/* <DownOutlined /> */}
            </Space>
        </Dropdown>
    )
}

export default DropDownHeader;